
<template>
  <div>
    <el-card class="box-card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!--        第一个页面商品基础信息-->
        <el-tab-pane label="商品信息" name="first">
          <!--            商品信息table-->
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <!-- <el-table-column type="selection" width="55">
					</el-table-column> -->
            <el-table-column prop="num" label="商品编号">
              <!--                    <template slot-scope="scope">{{ scope.row.date }}</template>-->
            </el-table-column>
            <el-table-column prop="goods_name" label="商品名称">
            </el-table-column>
            <el-table-column prop="type_id" label="商品分类">
              <template slot-scope="{row}">
                {{ typesList.find(item => item.id === row.type_id) ?typesList.find(item => item.id === row.type_id).name : '' }}
              </template>
            </el-table-column>
            <el-table-column prop="size" label="尺寸">
            </el-table-column>
            <el-table-column prop="color" label="颜色">
            </el-table-column>
            <el-table-column prop="marterial" label="材质">
            </el-table-column>
            <el-table-column prop="shelf_life" label="保质日期">
            </el-table-column>
            <!--<el-table-column
                            prop="goodsCount"
                            label="商品数量"
                            width="120">
                    </el-table-column>-->
            <el-table-column prop="goods_desc" label="商品描述">
            </el-table-column>

            <el-table-column prop="goodsEdit" label="操作" width="80">
              <template slot-scope="scope">
                <!-- dialogFormVisible = true -->
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="update_search(scope.row)"
                ></el-button>
              </template>
              <!--                    <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>-->
            </el-table-column>

            <el-table-column prop="goodsDelete" label="删除" width="80">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="delete1(scope)"
                ></el-button>
              </template>
            </el-table-column>
            <!--                分页-->
          </el-table>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="10"
              layout="total, prev, pager, next"
              :total="total"
              style="float: right; margin-top: 2%"
            >
            </el-pagination>
          </div>

          <el-form>
            <!--                编辑商品按钮-->
            <el-dialog @close="dialogCloseHandler" title="编辑商品" :visible.sync="dialogFormVisible">
              <el-form label-position="right" ref="editForm" label-width="120px" :model="goodsForm" :rules="formRules">
                <el-form-item label="名称：" prop="goods_name">
                  <el-input style="width: 20em" v-model="goodsForm.goods_name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="分类：" prop="type_id">
                  <el-select placeholder="请选择" v-model="goodsForm.type_id">
                    <el-option v-for="item in typesList" :key="item.index" :value="item.id" :label="item.name"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="尺码：" prop="size">
                  <el-input style="width: 20em" v-model="goodsForm.size" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="材质：" prop="marterial">
                  <el-select placeholder="请选择" v-model="goodsForm.marterial">
                    <el-option v-for="item in staticData.marterial" :key="item.index" :value="item[1]" :label="item[1]"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="颜色：" prop="color">
                  <el-select placeholder="请选择" v-model="goodsForm.color">
                    <el-option v-for="item in staticData.colors" :key="item.index" :value="item[1]" :label="item[1]"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="生产日期：" prop="product_time">
                  <el-date-picker style="width: 20em" v-model="goodsForm.product_time" placeholder="请选择"></el-date-picker>
                </el-form-item>
                <el-form-item label="保质期(天)：" prop="shelf_life">
                  <el-input style="width: 20em" v-model="goodsForm.shelf_life" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="商品描述：" prop="goods_desc">
                  <el-input type="textarea" style="width: 20em" v-model="goodsForm.goods_desc" placeholder="请输入"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <!-- ialogFormVisible = false -->
                <el-button @click="clean()">取 消</el-button>
                <el-button type="primary" @click="update"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
          </el-form>
        </el-tab-pane>

        <!--        第二个页面添加商品-->
        <el-tab-pane label="添加商品" name="second">
          <div id="add">
            <el-form label-position="right" ref="form" label-width="120px" :model="goodsForm" :rules="formRules">
              <el-form-item label="名称：" prop="goods_name">
                <el-input style="width: 20em" v-model="goodsForm.goods_name" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="分类：" prop="type_id">
                <el-select placeholder="请选择" v-model="goodsForm.type_id">
                  <el-option v-for="item in typesList" :key="item.index" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="尺码：" prop="size">
                <el-input style="width: 20em" v-model="goodsForm.size" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="材质：" prop="marterial">
                <el-select placeholder="请选择" v-model="goodsForm.marterial">
                  <el-option v-for="item in staticData.marterial" :key="item.index" :value="item[1]" :label="item[1]"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="颜色：" prop="color">
                <el-select placeholder="请选择" v-model="goodsForm.color">
                  <el-option v-for="item in staticData.colors" :key="item.index" :value="item[1]" :label="item[1]"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="生产日期：" prop="product_time">
                <el-date-picker style="width: 20em" v-model="goodsForm.product_time" placeholder="请选择"></el-date-picker>
              </el-form-item>
              <el-form-item label="保质期(天)：" prop="shelf_life">
                <el-input style="width: 20em" v-model="goodsForm.shelf_life" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="商品描述：" prop="goods_desc">
                <el-input type="textarea" style="width: 20em" v-model="goodsForm.goods_desc" placeholder="请输入"></el-input>
              </el-form-item>
            </el-form>
            <div class="bottomBtn" style="box-sizing:border-box;padding-left: 200px">
              <el-button
                  type="primary"
                  plain
                  @click="add"
              >添加商品
              </el-button>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import http from "../util/http";
import staticData from "@/utils/staticData";
import goodsApi from "@/api/goods";

export default {
  data() {
    return {
      activeName: "first",
      types: "",
      index: "",
      goodsForm:{},
      formRules:{},
      current: 1,
      staticData,
      lab: [
        {
          key: "生活用品",
          display_name: "生活用品",
        },
        {
          key: "生鲜水果",
          display_name: "生鲜水果",
        },
        {
          key: "家电",
          display_name: "家电",
        },
        {
          key: "数码",
          display_name: "数码",
        },
        {
          key: "食品",
          display_name: "食品",
        },
        {
          key: "其他",
          display_name: "其他",
        },
      ],
      tableData: [],
      currentPage: 1,
      multipleSelection: [],
      dialogFormVisible: false,
      form: {
        productTime: "",
        goodsName: "",
        goodsTime: "",
        goodsCount: "",
        goodsMs: "",
        goodsType: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      typesList: [],
      formLabelWidth: "120px",
      dialogVisible: false,
      total: 0,
      size: 10,
      value: "",
      visible: false,
    };
  },
  created() {
    const rulesFields = ['goods_name', 'color', 'size', 'marterial', 'product_time', 'shelf_life', 'type_id'];
    rulesFields.forEach(item => {
      this.formRules[item] = [{
        required: true, message: '该项为必填项', trigger:['blur', 'change']
      }]
    })
    this.getShop();
    this.getShopList();
  },
  mounted() {
    console.log(this.lab);
  },
  methods: {
    getShopList() {
      http({
        method: "get",
        url: "/goodsType/list",
      })
        .then((res) => {
          var res = res.data.data.list;
          this.typesList = res;
          /* lab:[
					{
						key:"生活用品",display_name:'生活用品'
					}, */
          var arr = [];
          for (var i = 0; i < res.length; i++) {
            arr.push({
              key: res[i].id,
              display_name: res[i].name,
            });
          }
          this.lab = arr;
        })
        .catch(() => {
          alert("err");
        });
    },
    dialogCloseHandler() {
        this.goodsForm = {};
        this.$refs.editForm.resetFields();
    },
    getShop() {
      goodsApi.goodsQuery({
        state: '0,1',
        page: this.current,
        size: this.size,
        keywords: {}
      })
        .then((res) => {
          this.total = res.data.data.row.count;
          console.log(res.data.data);
          // console.log(res);
          if (res.status === 200) {
            this.tableData = res.data.data.row.rows;
          }
        })
        .catch((err) => {
          this.$alert(err);
        });
    },
    update() {
      this.$refs.editForm.validate(valid => {
        if(valid){
          goodsApi.goodsUpdate(this.goodsForm)
              .then((res) => {
                const data = res.data;
                if(data.code === 200) {
                  this.$message.success(data.msg);
                  this.dialogFormVisible = false;
                  this.getShop();
                }else{
                  this.$message.error(data.msg);
                }
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "更新失败",
                });
              });
        }
      })
    },
    update_search(row) {
      this.dialogFormVisible = true;
      this.goodsForm = {...row};
    },
    delete1(scope) {
      const that = this;
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        goodsApi.goodsDelete({id:scope.row.id}).then(res => {
          console.log(res);
          if(res.data.code === 200) {
            this.$message.success(res.data.msg);
            that.current = 1;
            that.getShop();
          }else{
            that.$message.success(res.data.msg);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
      this.goodsForm = {};
      this.$refs.form.resetFields();
	  if(tab.index==0){
      this.getShop();
	  }

    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
    },
    handleCurrentChange(val) {
      console.log(val);
      this.current = val;
      this.getShop();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    add() {
      this.$refs.form.validate((valid)=> {
        if(valid){
          const time = new Date();
          this.goodsForm.num = time.getFullYear() + time.getSeconds() + time.getMonth() + (+new Date());
          goodsApi.goodsAdd(this.goodsForm).then(res => {
            console.log(res);
            const data = res.data;
            if(data.code === 200){
              this.$message.success(data.msg);
              this.activeName = "first";
              this.goodsForm = {};
              this.$refs.form.resetFields();
              this.getShop();
              this.getShopList();
            }else{
              this.$message.error(data.msg);
            }
          })
        }
      })
    },
    clean() {
      this.dialogFormVisible = false;
      this.form.goodsName = "";
      this.form.goodsTime = "";
      this.form.desc = "";
      this.types = "";
    },
  },
};
/* this.$confirm('是否添加此商品？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		this.$message({
			type: 'success',
			message: '添加成功!'
		});
	}).catch(() => {
		this.$message({
			type: 'info',
			message: '已取消添加'
		});
	}); */
/* http({

	}) */
</script>
<style scoped>
#app .el-select,#app .el-input{
  margin-bottom: 4px;
}
</style>
